
body{
    background: #ddd;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    overflow: hidden;
    -webkit-font-smoothing:antialiased;
}
a{
    text-decoration: none;
    color: #555;
}
.clr{
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
    padding: 0;
}
.st-container{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.st-container >input,
.st-container >a{
    width: 20%;
    height: 34px;
    line-height:34px;
    position: absolute;
    bottom: 0;
}
.st-container >input{
    opacity: 0;
    z-index: 1000;
}
.st-container >a{
    z-index: 10;
    font-weight: 700;
    font-size: 16px;
    background-color: #444444;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px rgb(5, 1, 2);
}
#st-control-1,#st-control-1 + a{
    left: 0%;
}
#st-control-2,#st-control-2 + a{
    left: 20%;
}
#st-control-3,#st-control-3 + a{
    left: 40%;
}
#st-control-4,#st-control-4 + a{
    left: 60%;
}
#st-control-5,#st-control-5 + a{
    left: 80%;
}
.st-container input:checked + a,
.st-container input:checked:hover + a{
    background-color: #222222;
}
.st-container input:checked +a:after{
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 20px solid transparent;
    border-bottom-color: #222222;
    position: absolute;
    bottom: 100%;
    left:50%;
    margin-left: -20px;
}
#st-control-1:checked ~ .st-scroll{
    -webkit-transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
    -webkit-transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
    -webkit-transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
    -webkit-transform: translateY(-300%);
}
.st-container input:hover +a{
    background-color: #333333;
}
.st-scroll,
.st-panel{
    width: 100%;
    height: 100%;
    position: relative;
}
.st-scroll{
    left: 0;
    top:0;
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.6s ease-in-out;
}
.st-panel{
    background-color: #fff;
    overflow: hidden;
}
.st-des{
    width: 350px;
    height: 350px;
    background-color: dimgray;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left:-100px;
    -webkit-transform:translateY(-50%)rotate(45deg);
}
.st-panel h2{
    color: #555555;
    font-size: 54px;
    line-height: 50px;
    text-align: center;
    font-weight: 900;
    width: 80%;
    position: absolute;
    left: 14%;
    top: 50%;
    margin-top: -70px;
    text-shadow: 1px 1px 1px rgb(5, 1, 2);
    -webkit-backface-visibility: hidden;
}
.st-color{
    background-color: #777777;
}
.s-color
{
    background-color: #ffffff;
}
.st-panel p{
    font-size:23px ;
    font-weight: lighter;
    position: absolute;
    text-align:left;
    width: 60%;
    left: 22%;
    top: 50%;
    color: #222222;
    margin-top: 15px;
}